<template>
  <div class="project_info_two">
    <div class="title_two">{{ title }}</div>
    <div class="noti">单位 : <span>元</span></div>
    <div class="list">
      <div v-for="(item,index) in list" :key="index" class="list_each">
        <div class="num">{{ item.change? AmountSlite(item.num):item.num }}</div>
        <div class="num_title">{{ item.title }}</div>
      </div>
    </div>
    <div class="task_btn">
      <!-- <el-button @click="()=>$emit('taskList')">任务管理</el-button> -->
      <el-button type="primary" @click="()=>$emit('taskCreat')">发布任务</el-button>
    </div>
  </div>
</template>

<script>
import { AmountSlite } from '@/utils/utils';
export default {
  name: 'ProjectInfoTwo',
  props: {
    title: {
      type: String,
      default: () => ''
    },
    list: {
      type: Array,
      default: () => ([])
    }
  },
  methods: {
    AmountSlite
  }
};
</script>

<style lang='scss' scoped>
  $vw:1920;
  /*像素转换相对单位vw*/
  @function px2vw($px) {
    @return $px / $vw * 100vw;
  }
.project_info_two{
  width: 100%;
  height: 100%;
  position: relative;
  .title_two{
    height: px2vw(45);
    line-height: px2vw(45);
    font-size: px2vw(32);
    font-family: PingFangSC, PingFangSC-Medium;
    color: #333333;
  }
  .noti{
    padding-top: px2vw(14) ;
    height: px2vw(45);
    // line-height: px2vw(45);
    font-size: px2vw(18);
    font-family: PingFangSC, PingFangSC-Medium;
    color: rgba(0,0,0,0.45);
    // padding-top: 10px;
    // padding-bottom: 10px;
    >span{
      padding-left: 8px;
    }
  }
  .list{
    height: calc(100% - 4.6875vw);
    display: flex;
    .list_each{
      padding-right: px2vw(50);
      // flex: 1;
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      justify-content: flex-end;
      .num{
        font-size: px2vw(48);
        font-family: Arial, Arial-Regular;
        color: #faad14;
      }
      .num_title{
        font-size: px2vw(24);
        font-family: PingFangSC, PingFangSC-Medium;
        color: rgba(0,0,0,0.85);
      }
    }
  }
  .task_btn{
      // flex: 1;
      display: flex;
      // height: 40px;
      align-items: flex-end;
      justify-content: flex-end;
      position: absolute;
      top: 0;
      right: 0;
    }
}
</style>
